feat(AnalyticalTable): add experimental feature to determine column widths based on content #295
Conversation
vbersch
changed the title
| @@ -56,39 +61,39 @@ const columns = [ | |||
| const data = generateData(200); | |||
| const dataTree = generateData(20, true); | |||
|
|
|||
| export const defaultTable = () => { | |||
| const renderTable = () => { | |||
| // const innerData = generateData(200); | |||
There was a problem hiding this comment.
please remove
| // const innerData = generateData(200); |
| @@ -56,39 +61,38 @@ const columns = [ | |||
| const data = generateData(200); | |||
| const dataTree = generateData(20, true); | |||
|
|
|||
| export const defaultTable = () => { | |||
| const renderTable = () => { | |||
There was a problem hiding this comment.
can you please export this story again and remove the new export you have creating? having these nested component demos is breaking our storybook:
| @@ -259,6 +259,7 @@ const makeTreeEntry = () => ({ | |||
|
|
|||
| const makeEntry = () => ({ | |||
| name: getRandomName(), | |||
| longColumn: 'Really really long column content... don´t crop please', | |||
There was a problem hiding this comment.
can you add the long column to the treeTableData as well? otherwise this column is always empty. Or change the columns for the treeTable back to the old config.
| } = props; | ||
|
|
||
| const classes = useStyles({ rowHeight: props.rowHeight }); | ||
| const [internalRows, setInternalRows] = useState([]); | ||
| const [hiddenColumns, setHiddenColumns] = useState([]); |
There was a problem hiding this comment.
Do we really need this shadow on the hidden columns? can't we just call useDynamicColumnWidths after useTable and use the columns from the tableState?
| } = props; | ||
|
|
||
| const classes = useStyles({ rowHeight: props.rowHeight }); | ||
| const [internalRows, setInternalRows] = useState([]); |
There was a problem hiding this comment.
do we really need that? why not using the rows from the table direclty?
| const updateTableClientWidth = useCallback(() => { | ||
| requestAnimationFrame(() => { | ||
| if (tableRef.current) { | ||
| setTableClientHeight(tableRef.current.clientWidth); |
There was a problem hiding this comment.
clientHeight === clientWidth?
| charLength < 15 ? Math.sqrt(charLength * 1500) : 8 * charLength; | ||
| const approximateContentPxFromCharLength = (charLength) => 8 * charLength; | ||
|
|
||
| export const useDynamicColumnWidths = (scaleWidthMode, columns, rows, totalWidth, hiddenColumns, setColumnWidth) => { |
There was a problem hiding this comment.
can we run this as a tableHook? just the our useXYZStyle hooks? then we would have access to all table data like columns, row, width, hidden columns, etc...
# Conflicts: # packages/main/src/components/AnalyticalTable/index.tsx
| @@ -59,6 +60,7 @@ const dataTree = generateData(20, true); | |||
| export const defaultTable = () => { | |||
| return ( | |||
| <div style={{ display: 'flex', flexDirection: 'column' }}> | |||
| {' '} | |||
There was a problem hiding this comment.
I guess we can remove that line?
| } = props; | ||
|
|
||
| const classes = useStyles({ rowHeight: props.rowHeight }); | ||
| // const [tableClientWidth, setTableClientWidth] = useState(0); |
…AP/ui5-webcomponents-react into feat/experimental-dynamic-table-widths
No description provided.